<template>
  <div @click="itemClick" class="button_item_view">
      <img class="itemImage" :src="icon"/>
      <div class="itemTitle">{{title}}</div>
  </div>
</template>

<script>
export default {
    name: 'ButtonItemView',
    props: {
        title: String,
        icon: String,
        index : Number
   },
   methods:{
       itemClick(){
           this.$emit("itemClick",this.index);
       }
   } 
}
</script>

<style>
.button_item_view{
    text-align: center;
}

.itemImage{
    width: 60px;
    height: 60px;
}

.itemTitle{
    font-size: 15px;
    font-family: PingFangSC;
    color: white;
}
</style>